<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>全屏计时器（美观等宽字体）</title>
    <style>
        /* 导入 Fira Code 和 Roboto Mono 字体 */
        @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&family=Roboto+Mono:wght@400;700&display=swap');

        body {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #1a1a1a;
            color: #e0e0e0;
            font-family: 'Fira Code', 'Roboto Mono', monospace; /* 优先使用 Fira Code，回退到 Roboto Mono */
            touch-action: manipulation;
        }
        .timer-container {
            text-align: center;
            width: 100%;
        }
        .timer {
            font-size: 10rem;
            font-weight: bold;
            margin: 20px 0;
            letter-spacing: 2px;
            font-variant-numeric: tabular-nums; /* 确保数字等宽 */
        }
        .buttons {
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        button {
            padding: 15px 30px;
            font-size: 1.5rem;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            background-color: #4CAF50;
            color: white;
            font-family: 'Fira Code', 'Roboto Mono', monospace;
            transition: opacity 0.2s;
        }
        button:hover {
            opacity: 0.9;
        }
        button:active {
            opacity: 0.8;
        }
        #stopBtn {
            background-color: #f44336;
        }
    </style>
</head>
<body>
    <div class="timer-container">
        <div class="timer" id="timer">00:00</div>
        <div class="buttons">
            <button id="startBtn">启动</button>
            <button id="stopBtn">停止</button>
        </div>
    </div>

    <script>
        const timerDisplay = document.getElementById('timer');
        const startBtn = document.getElementById('startBtn');
        const stopBtn = document.getElementById('stopBtn');
        
        let seconds = 0;
        let timer;
        let isRunning = false;

        // 格式化时间（00:00）
        function formatTime(seconds) {
            const mins = Math.floor(seconds / 60).toString().padStart(2, '0');
            const secs = (seconds % 60).toString().padStart(2, '0');
            return `${mins}:${secs}`;
        }

        // 更新计时器显示
        function updateTimer() {
            seconds++;
            timerDisplay.textContent = formatTime(seconds);
        }

        // 启动计时器
        startBtn.addEventListener('click', () => {
            if (!isRunning) {
                timer = setInterval(updateTimer, 1000);
                isRunning = true;
            }
        });

        // 停止计时器
        stopBtn.addEventListener('click', () => {
            clearInterval(timer);
            isRunning = false;
        });

        // 点击全屏（可选）
        document.addEventListener('click', () => {
            if (document.documentElement.requestFullscreen) {
                document.documentElement.requestFullscreen();
            }
        });
    </script>
</body>
</html>